<style scoped>

</style>
<template>
    <div class="page-wrap page-share-order" id="page-share-order">
        <div class="g-body">

            <header-component :page-name="!!uid?'我的晒单记录':'晒单记录'"></header-component>


            <div class="w-shareList" id="shareOrderList" v-if="item.length>0">


                <a href="javascript:;" class="w-shareItem"  v-link="{path:'/shareDetail',query:{id:i.id}}" v-for="(k,i) in item" >
                    <div class="title">{{i.title}}</div>
                    <div class="author">{{i.usename}}&nbsp;<span class="time">{{i.time}}</span></div>
                    <div class="abbr">
                        <div class="pic" :style="{backgroundImage:'url('+i.thumbs+')'}"></div>
                        <div class="txt">{{i.content}}</div>
                    </div>
                </a>

            </div>
            <div class="w-more" id="shareOrderMore" v-el:share-order-more>
                <template v-if="hasMore && !!item">
                    <b class="ico ico-loading"></b> 努力加载中
                </template>
                <template v-if="!item && page==0">
                    还没有晒单记录
                </template>
                <template v-if="!hasMore && !!item">
                    没有更多了
                </template>
            </div>
        </div>
    </div>
    <nav-component keep-alive ></nav-component>
</template>
<script>
    import ShareOrder from '../module/shareOrder'
    import headerComponent from '../components/header'
    import navComponent from '../components/nav'
    module.exports = {
        data() {
            return {
                item: [],
                page: 0,
                limit:10,
                id: 0,
                uid:0,
                hasMore: true,
                loading: false,
            }
        },

        components: {

            headerComponent,
            navComponent

        },

        created(){

            this.$dispatch('isLoading', true);

        },

        async ready() {

        if (!!this.$route.query.id||!!this.$route.query.uid) {

            this.id = this.$route.query.id;

            this.uid  = this.$route.query.uid;

        }

        console.log(this.uid);

        let res = [];

        if (!!this.uid) {

            res = await ShareOrder.getListByUID(this.uid, this.page, this.limit);

        } else {

            res = await ShareOrder.getList(this.id, this.page, this.limit);

        }

        if (!!res.item) {

            this.item.splice(0,this.item.length);

            this.item.push(...res.item);

        } else if(!!res.item && res.item.length<10){
            this.hasMore = false;

        } else {
            this.hasMore = false;
        }

        document.addEventListener('scroll',this.getMore,false);

        this.$dispatch('isLoading', false);

    },

    beforeDestroy() {

        document.removeEventListener('scroll',this.getMore,false)

    },

    methods: {

        async loadMore(){

            if (this.loading) {

                return;

            }

            this.loading = true;

            let res = [];

            if (!!this.uid) {

                res = await ShareOrder.getListByUID(this.uid, this.page, this.limit);

            } else {

                res = await ShareOrder.getList(this.id, this.page, this.limit);

            }



            if (res && res.item && res.item.length > 0) {

                this.page++;

                this.item.push(...res.item);

                console.log(this.item);

            } else {

                this.hasMore = false;

            }

            this.loading = false;

        },

        getMore(){

            let pos = this.$els.shareOrderMore.getBoundingClientRect();


            if ( this.hasMore &&
                    ((pos.top > 0 && window.innerHeight - pos.top > 0) ||
                    (pos.top <= 0 && pos.bottom >= 0))) {

                this.loadMore();

            }

        }
    }
    }

</script>
